<template>
	<view>
		<view class="login-bg">
			<view class="bg3">
				<view style="height: 150rpx;padding-top: 50rpx;width: 100%;display: flex;">
					<image v-if="member.image" :src="member.image" mode="aspectFill" style="width: 140rpx;height: 140rpx;margin-top: -20rpx;margin-left: 5%;border-radius: 140rpx;"></image>
					<image v-else src="../../static/my/avatar.png" mode="aspectFill" style="width: 140rpx;height: 140rpx;margin-top: -20rpx;margin-left: 5%;border-radius: 140rpx;"></image>
					
					<view style="width: 70%;height: 100rpx;">
						<view style="color: #fff;padding-left: 5%;display: flex;height: 50rpx;">
							<view style="height: 50rpx;line-height: 50rpx;" v-if="member&&member.title">{{member.title}}</view>
							<view style="height: 50rpx;line-height: 50rpx;" v-else @click="login">未登录</view>
							<view style="height: 50rpx;">
								<image v-if="member&&member.phone" @click="setting" src="../../static/my/edit.png" mode="widthFix" style="width: 20rpx;margin-top: 15rpx;margin-left: 10rpx;"></image>
							</view>
						</view>
						<view v-if="member&&member.phone" style="color: #FEFEFE;padding-left: 5%;font-size: 26rpx;font-weight: 400;opacity: 0.5;">{{member.phone}}</view>
					</view>
				</view>
			</view>
			<view class="t-box22" >
				<view class="other">
					<view class="other_addres" @click="fabu">
						<view style="display: flex;height: 60rpx;">
							<image src="../../static/my/fabu.png" mode="widthFix" class="biao"></image>
							<view class="biao_text">我的发布</view>
						</view>
						<image src="../../static/jiantou.png" mode="widthFix" style="width: 12rpx;margin-top: 22rpx;"></image>
					</view>
					<view class="other_our" @click="collect">
						<view style="display: flex;height: 60rpx;">
							<image src="../../static/my/collect.png" mode="widthFix" class="biao"></image>
							<view class="biao_text">我的收藏</view>
						</view>
						<image src="../../static/jiantou.png" mode="widthFix" style="width: 12rpx;margin-top: 22rpx;"></image>
					</view>
					<view @click="edit" class="other_our">
						<view style="display: flex;height: 60rpx;">
							<image src="../../static/my/pwd.png" mode="widthFix" class="biao"></image>
							<view class="biao_text">修改密码</view>
						</view>
						<image src="../../static/jiantou.png" mode="widthFix" style="width: 12rpx;margin-top: 22rpx;"></image>
					</view>
					<view @click="loginout" class="other_our">
						<view style="display: flex;height: 60rpx;">
							<image src="../../static/my/loginout.png" mode="widthFix" class="biao"></image>
							<view class="biao_text">退出登录</view>
						</view>
						<image src="../../static/jiantou.png" mode="widthFix" style="width: 12rpx;margin-top: 22rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick"
		        :color="color" :selectedColor="selectedColor"></custom-tab-bar>
	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
	    components: {
			CustomTabBar
	    },
	    data() {
	        return {
				currentTab: 4, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				
				member:null
			}
		},
		onLoad() {
			this.member = uni.getStorageSync('member')
			if(this.member){
				this.member_action()
			}
		},
		onShow() {
			this.member = uni.getStorageSync('member')
			if(this.member){
				this.member_action()
			}
		},
		methods: {
			login(){
				uni.navigateTo({
					url:'/pages/my/login'
				})
			},
			setting(){
				uni.navigateTo({
					url:'/pages/my/setting'
				})
			},
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
			   //this.currentTab = index;  

			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
			 edit(){
				 console.log(uni.getStorageSync('member'))
				 if(!uni.getStorageSync('member')){
					 uni.navigateTo({
					 	url:'/pages/my/login'
					 })
				 }else{
					uni.navigateTo({
						url:'/pages/my/edit'
					}) 
				 }
			 },
			 member_action(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/member',
					method:'POST',
					data: { // 请求的参数
						phone:that.member.phone
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						if(res.data.data){
							this.member = res.data.data
							uni.setStorageSync('member',this.member)
						}
					}
				 })
				 			
			 },
			 loginout(){
				 uni.clearStorageSync();
				 uni.navigateTo({
				 	url:'/pages/index/index'
				 })
			 },
			 fabu(){
				 uni.navigateTo({
				 	url:'/pages/my/fabu'
				 })
			 },
			 collect(){
				 uni.navigateTo({
				 	url:'/pages/my/collect'
				 })
			 }
		}
	}
</script>

<style>
	/* #ifdef H5 */
		page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
		/* #endif */
		
		page {
		    padding-bottom: 140rpx;
		}
		
		.login-bg {
		}
		.bg3{
			height: 230rpx;
			background-color: #336CFE;
		}
		.t-box22{
			text-align: center;
			width: 100%;
			margin: 0 auto;
			margin-top: -50rpx;
			font-size: 28rpx;
			background-color: #ffffff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
			z-index: 9;
		}
		.other{
		  margin: 10rpx 40rpx;
		   height: auto;
		   width: 90%;
		   border-radius: 20rpx;
		   background-color: #fff;
		   
	   }
	   .other_addres{
		   height: 60rpx;
		   padding: 20rpx 20rpx;
		   padding-top: 30rpx;
		   padding-bottom:20rpx;
		   border-bottom: 1rpx solid gainsboro;
		   display: flex;
		   justify-content: space-between;
		   image{
			   width: 50rpx;
		   }
	   }
	   .other_our{
		   height: 60rpx;
		   padding: 20rpx 20rpx;
		   padding-top: 20rpx;
		   padding-bottom: 20rpx;
		   
		   display: flex;
		   justify-content: space-between;
		   border-bottom: 1rpx solid gainsboro;
		   image{
				width: 50rpx;
		   }
	   }
	   .biao{
		   width: 30rpx !important; height: 30rpx !important; margin-top: 15rpx !important;margin-right: 15rpx !important;
	   }

		.biao_text{
			height: 60rpx;
			line-height: 60rpx;
		}
</style>